// data tables

body.caerp table {
	caption {
		border-top: 1px dashed var(--border-color);
		border-bottom: 1px dashed var(--border-color);
		font-weight: bold;
		margin-top: var(--padding-s);
		padding: 2px 0;
		text-align: left;
	}

	th,
	td {
		font-size: .875rem;
		padding: 4px 2px;
		position: relative;

		&.status {
			color: var(--static-invert-color);

			&.positive {
				background: var(--func-positive-color);
			}
		}

		&.archive {
			color: var(--text-greyed-color);
			font-style: italic;
			.positive {
				color: var(--func-positive-color);
			}
			.negative {
				color: var(--func-negative-color);
			}
		}
	}

	&.summary th,
	&.summary td {
		padding: 2px 4px;
	}

	&.top_align_table td,
	tr.top_align th,
	tr.top_align td,
	th.top_align,
	td.top_align {
		padding-bottom: 6px;
		padding-top: 10px;
		vertical-align: top;

		&.col_select {
			padding-bottom: 0;
			padding-top: 0;
		}
	}

	&.top_align_table tr.center_align th,
	&.top_align_table tr.center_align td,
	&.top_align_table th.center_align,
	&.top_align_table td.center_align {
		padding-bottom: 0;
		padding-top: 0;
		vertical-align: middle;
	}

	thead th.col_select[scope="col"] {
		vertical-align: middle;
	}

	thead tr.display {
		td {
			border-bottom: 1px solid var(--form-focus-line3-color);

			&.col_actions {
				padding: 0;
				text-align: center;

				&:first-child {
					min-width: 0;
					width: 1em;
				}
			}
		}

		.btn.small {
			padding: 5px;
		}

		.btn-group .dropdown-menu a.btn {
			padding-bottom: 5px;
			padding-top: 5px;
		}
	}

	thead tr.source {

		th,
		td {
			padding-bottom: 0;
			padding-top: 0;
		}
	}

	th[scope="row"] {
		text-align: left;
	}

	th {
		strong {
			text-transform: uppercase;
		}

		span.icon {
			margin-right: .125rem;
			vertical-align: .125rem;
		}

		a:link,
		a:visited {
			color: var(--link-color);
		}

		a {
			text-decoration: none;

			&.icon {
				padding-left: 10px;
				position: relative;

				svg {
					bottom: 4px;
					fill: var(--svg-fill-color);
					height: 8px;
					left: 0;
					opacity: .25;
					position: absolute;
					vertical-align: baseline;
					width: 8px;
				}
			}

			&.icon.mini {
				svg {
					left: var(--padding-s);
				}
			}

			&:hover,
			&:focus,
			&:active {
				text-decoration: underline;

				svg {
					opacity: 1;
				}
			}

			&.icon.current {
				padding-left: 14px;

				svg {
					height: 12px;
					margin-top: -6px;
					opacity: 1;
					width: 12px;
				}
			}
		}
	}

	thead th[scope="col"] {
		color: var(--text-greyed-color);
		line-height: 1.25;
		vertical-align: bottom;
		svg {
			fill: var(--text-greyed-color);
		}
	}

	thead tr:first-child th[scope="col"] {
		height: 3.5em;
	}

	tbody th {
		a:only-child {
			display: block;
		}

		a:link,
		a:visited {
			color: var(--text-color);
		}
		small {
			font-weight: normal;
			line-height: 1;
			margin-top: .25em;
		}
	}

	td {
		text-align: center;

		input[type="text"],
		input[type="date"] {
			text-align: center;
		}

		strong {
			line-height: .75;
		}

		.icon_choice {
			padding: 0px;

			.toggle-buttons {
				padding: 0;
			}

			label {
				>span>span {
					display: none;
				}
			}
		}

		.icon_label svg {
			vertical-align: inherit;
		}
	}

	input[type="text"],
	input[type="number"] {
		background: var(--table-input-background);
		padding: var(--padding-s) 0;
	}

	div.checkbox,
	div.radio,
	div.toggle {
		padding: .25em 0;
		width: 100%;
	}

	div.checkbox input[type="checkbox"],
	div.toggle input[type="checkbox"],
	div.radio input[type="radio"] {
		margin-top: .5rem;
	}

	.col_text {
		text-align: left;

		&.align_right {
			text-align: right;
		}

		&.align_center {
			text-align: center;
		}

		input[type="text"] {
			text-align: left;
		}
	}

	$widths: (
		4,
		6,
		8,
		10,
		12,
		14,
	);

	@each $number in $widths {
	.col_text.min#{$number} {
		min-width: #{$number}em;
	}
	}

	td.col_text {
		hyphens: auto;
		overflow-wrap: anywhere;

		a {
			border: unset;
			color: var(--text-color);
			display: block;
			line-height: 1.25;
			text-decoration: none;
		}

		a:hover,
		a:focus,
		a:active {
			text-decoration: underline;
		}

		li {
			overflow-wrap: anywhere;
			padding: 0 0 4px;
		}

		small.description {
			display: block;
			display: -webkit-box;
			hyphens: none;
			line-clamp: 3 "…";
			max-height: 3.75em;
			overflow: hidden;
			padding: 2px 0;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
		}

		.topay strong {
			color: var(--func-caution-color);
		}

		.icon.status {
			margin: var(--padding-s) var(--padding-s) var(--padding-s) 0;
		}

		button {
			hyphens: none;
		}

		&.form {
			>div {
				padding: var(--padding-xl) 0 var(--padding-s) 0;

				button {
					margin: var(--padding-xl) var(--padding-xl) 0 0;
				}

				div {
					overflow-wrap: anywhere;
				}

				a {
					display: inline;
					line-height: 1.75;

					&.icon.unstyled {
						margin: -(var(--padding-m)) 0;
					}
				}
			}
		}

		&:not(.col_icon) .icon {
			margin: 0 .125em;

			svg {
				vertical-align: baseline;
			}
		}

		&.document_number {
			word-break: break-word;
		}

		&.unity {
			word-break: break-all;
		}
	}

	td.col_icon {
		.icon svg {
			height: var(--icon-size-s);
			width: var(--icon-size-s);
		}
	}

	td.col_avatar {
		min-height: 2.75rem;
		width: 2.75rem;

		.user_avatar {
			height: 2.5rem;
			margin: 0;
			position: absolute;
			transition: transform .5s ease-out;
			width: 2.5rem;

			&.photo:hover {
				transform: scale(2);
				z-index: $floatingMenuLayer;
			}
		}
	}

	td.col_actions {
		max-width: calc( 9rem + 24px + .5rem );
		min-width: calc( 2.75rem );
		padding: 0 .25rem;
		text-align: right;

		> ul {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			list-style-type: none;
			padding: 0;
			width: 100%;

			li {
				display: inline-block;
				padding: 0;
			}
		}

		.btn {
			margin: 2px 0;
			text-align: left;

			&.up,
			&.down {
				padding: .625rem .25rem;
			}
		}

		.btn-container {
			display: inline-flex;
			display: inline flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin: 0;
		}

		.btn-group {
			display: inline-flex;
			display: inline flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin: 0;
			padding-left: 0;

			&:only-child {
				width: 100%;
			}

			.dropdown-menu {
				top: calc( 2.25rem + 6px );
			}
		}

		>.btn + .btn,
		>.btn + .btn-group,
		>.btn + .btn-container {
			margin-left: 2px;
		}

		.dropdown-menu-right .btn {
			margin: 0;
		}

		.btn.icon.only {
			font-size: 0;
			/* hide text */
		}

		&.width_one {
			width: calc( 2.75rem );

			>ul,
			>.btn-container,
			>.btn-group {
				justify-content: flex-end;
				margin-left: auto;
			}
		}

		&.width_two {
			width: calc( 4.5rem + 12px + .5rem );

			>ul,
			>.btn-container:only-child,
			>.btn-group:only-child {
				margin: 0 2px 0 auto;
				width: calc( 4.5rem + 2px + .5rem );
			}

			.btn-group {
				margin-left: auto;
				width: calc( 4.5rem + 4px + .5rem );
			}
		}

		&.width_three {
			width: calc( 6.75rem + 18px + .5rem );

			>ul,
			>.btn-container:only-child,
			>.btn-group:only-child {
				margin: 0 2px 0 auto;
				width: calc( 6.75rem + 8px + .5rem );
			}

			.btn-group {
				margin-left: auto;
				width: calc( 6.75rem + 12px + .5rem );
			}
		}

		&.width_four {
			width: calc( 9rem + 24px + .5rem );
		}

		&.width_two,
		&.width_three,
		&.width_four {
			.btn-group:not(:only-child) {
				width: auto;
			}
		}

		&.row_ordering {
			min-width: calc( 1.5rem + 7px + .5rem );
			width: calc( 3rem + 14px + .5rem );
		}
	}

	&.top_align_table .col_actions {
		padding-bottom: 5px;
		padding-top: 5px;
	}

	tr:only-child .col_actions.row_ordering,
	tbody.lines:only-of-type tr:only-child td.col_actions.row_ordering {
		display: none;
	}

	tbody.lines tr:only-child .col_actions.row_ordering,
	tbody.lines+tbody tr:only-child .col_actions.row_ordering {
		display: table-cell;
	}

	tbody.collapse_title>tr,
	tbody.collapse_title>tr:not(.row_recap):not(.row_catalogue):not(.add_row):nth-child(2n+1) {
		background: var(--table-odd-line-theme-color);
	}

	tbody.collapse_title {
		h4 {
			a {
				padding-left: 1.5em;
				position: relative;

				.arrow {
					left: 0;
					margin-top: -.5em;
					position: absolute;
					top: 50%;
				}
			}
		}
	}

	tbody.collapse_content tr:last-child td:not(.empty):not(.level_spacer) {
		border-bottom: 1px dashed var(--border-color);
	}

	.col_status {
		&:not(.col_text) {
			height: 2.5rem;
			min-width: 1.5rem;
			max-width: 2.5rem;
			text-align: center;
			white-space: nowrap;
			width: 2.5rem;
		}

		&.col_text {
			.flex {
				align-items: center;
			}
		}
	}

	td.col_status:not(.col_text) {
		position: relative;
		vertical-align: middle;

		span.status {
			align-items: center;
			border-radius: 0;
			bottom: 0;
			display: flex;
			height: auto;
			justify-content: center;
			left: 0;
			position: absolute;
			right: 0;
			top: 0;
			width: auto;

			svg {
				flex: 0 0 var(--icon-size-s);
			}
		}

		&:first-child+td {
			padding-left: var(--padding-s);
		}
	}

	.col_number {
		text-align: right;

		input[type="text"] {
			text-align: right;
		}
	}

	td.col_number {
		padding-left: var(--padding-m);
		white-space: nowrap;
		width: 3em;

		&.positive {
			color: var(--func-positive-color);
			.negative {
				color: var(--func-negative-color);
			}
		}

		&.negative {
			color: var(--func-negative-color);
			.positive {
				color: var(--func-positive-color);
			}
		}

		&.tva small {
			white-space: normal;
		}

		&.with_edit_button {
			white-space: normal;

			>span {
				white-space: nowrap;
			}

			.btn.unstyled {
				margin-top: var(--padding-s);
			}
		}

		&.input {
			width: 5em;

			.form-group {
				padding-bottom: 0;
			}
		}
	}

	&.top_align_table td.col_number {
		&.input {
			padding: var(--padding-s);

			label:not([for]) {
				padding: 0;
			}
		}
	}

	.col_select {
		vertical-align: middle;
		width: 3em;

		label {
			padding: 0;
		}

		div.checkbox,
		div.radio {
			margin: 0 auto;
			transform: translateY(-.25rem);
			width: 1.5rem;
		}

		div.toggle {
			margin: .5rem auto;
			transform: translateY(-.25rem);
			width: 3rem;
		}

		.form-group {
			padding: 0;
		}
	}

	&.top_align_table .col_select {

		div.checkbox,
		div.radio {
			transform: translateY(.0625rem);
		}
	}

	.col_percentage_graphic {
		width: 180px;

		em {
			display: inline-block;
			font-size: .75rem;
			font-weight: normal;
			line-height: 1;
			text-align: left;
		}
	}

	.row_number {
		th {
			font-weight: normal;
		}

		td {
			text-align: right;
			white-space: nowrap;

			input[type="text"] {
				text-align: right;
			}
		}
	}

	.row_month {

		th,
		td {
			width: 4em;
		}
	}

	.row_total {

		th,
		td {
			font-weight: bold;
		}
	}

	thead .row_total {

		th,
		td {
			border-bottom: 1px solid var(--border-trans-color);
		}
	}

	tfoot .row_total {

		th,
		td {
			border-top: 1px solid var(--border-trans-color);
		}
	}

	td.total {
		font-weight: bold;
	}

	.row_recap {

		th,
		td {
			font-weight: bold;
		}

		.col_actions {
			background: var(--screen-background-color);
			white-space: nowrap;

			a.btn:not(.only),
			button:not(.only) {
				padding: .25rem .5rem .25rem .25rem;

				svg {
					margin: 0 2px;
				}
			}
		}

		h4 {
			small {
				font-weight: normal;
				padding-left: .5em;
			}

			.icon.status {
				fill: var(--static-invert-color);
				height: 1.5em;
				vertical-align: text-bottom;
				width: 1.5em;

				svg {
					fill: var(--static-invert-color);
				}
			}
		}
	}

	.row_recap th,
	.row_recap td:not(.level_spacer):not(.empty),
	.highlighted th,
	.highlighted td:not(.level_spacer):not(.empty),
	th.highlighted,
	td.highlighted:not(.level_spacer):not(.empty) {
		background: var(--table-row-recap-color);
	}

	.row_main th,
	.row_main td:not(.level_spacer):not(.empty),
	.row_recap.row_main th,
	.row_recap.row_main td:not(.level_spacer):not(.empty) {
		background: var(--theme-color);
		color: var(--theme-text-color);
	}

	.highlight_pen th,
	.highlight_pen td:not(.level_spacer):not(.empty),
	th.highlight_pen,
	td.highlight_pen:not(.level_spacer):not(.empty) {
		background: var(--highlight-color) !important;
		color: var(--static-color) !important;
	}

	td.total {
		font-weight: bold;
	}

	.row_highlight {

		th,
		td {
			background: var(--message-default-background-color);
		}
	}

	.col_date,
	.col_datetime {
		width: 7em;
		overflow-wrap: normal;
	}

	.col_datetime {
		width: 10em;
	}

	td.col_status {
		font-size: .825rem;
	}

	tr.selected td {
		background: var(--table-row-recap-main-color);
	}

	tr.locked td.col_text,
	tr.locked td.col_date,
	tr.locked td.col_number {
		text-decoration: line-through;
	}

	tr.clickable-row,
	td.clickable-cell,
	td[onclick],
	tr[onclick] {
		cursor: pointer;
	}

	&.hover_table tbody:not(.total)>tr:not(.row_recap):not(.row_total):hover td:not([class*="spacer"]):not([class*="empty"]),
	&.hover_table tbody:not(.total)>tr:not(.row_recap):not(.row_total):hover th {
		background: var(--table-hover-line-color);
		text-shadow: none;

		.hidden_pdf {
			background: none;
			text-shadow: none;
		}
	}

	tbody>tr:not(.row_recap):not(.row_catalogue):not(.add_row):nth-child(2n + 1) {
		background: var(--table-odd-line-color);
	}

	tbody.collapse_title tr:first-child td:not(.level_spacer) {
		border-top: 1px dashed var(--border-color);
	}

	.total tr:first-child th:not(:empty),
	.total tr:first-child td:not(:empty) {
		border-top: 1px solid var(--border-trans-color);
	}

	tfoot tr:not(.row_total):first-child td:not(:empty),
	tfoot tr:not(.row_total):first-child th:not(:empty) {
		border-top: 1px solid var(--border-trans-color);
	}

	&.spaced_table {
		margin: var(--padding-s) 0;
	}

	h2,
	h3,
	h4,
	h5,
	h6 {
		hyphens: none;
		padding: 0;
	}

	h4 {
		text-align: left;
	}

	span.icon {
		&.help {
			vertical-align: text-top;

			svg {
				fill: var(--form-button-disabled-text-color);
			}
		}

		svg {
			height: .75rem;
			width: .75rem;
		}

		&.tag svg {
			height: .875rem;
			flex-basis: .875rem;
			width: .875rem;
		}

		&.type {
			padding: 1px 0;

			svg {
				height: 1rem;
				width: 1rem;
			}
		}
	}

	th.table_hint,
	td.table_hint {
		padding-bottom: 20px;

		button.mini {
			bottom: 0;
			position: absolute;
			right: 0;
			z-index: 2;
		}
	}

	th.separate_right,
	td.separate_right {
		border-right: 1px dashed var(--border-color);
	}

	th.separate_left,
	td.separate_left {
		border-left: 1px dashed var(--border-color);
	}

	tr[class*="separate"] td.empty {
		padding: 0;
	}

	tr.separate_top th,
	tr.separate_top td {
		border-top: 2px solid var(--theme-color);
	}

	tr.separate_bottom th,
	tr.separate_bottom td {
		border-bottom: 2px solid var(--theme-color);
	}

	th.separator {
		background: var(--table-odd-line-color);
	}

	td .rich_editor {
		margin: -15px 0 0;
	}

	&.top_align_table td .rich_editor,
	tr.top_align td .rich_editor {
		margin-top: -11px;
	}

	th button.mini,
	td button.mini {
		&.icon {
			padding: 0;
		}
	}

	.level_spacer {
		background: var(--screen-background-color);
		width: var(--padding-s);
	}

	.empty {
		background: var(--screen-background-color);
	}

	&.full_width {
		width: 100%;
	}

	.table_summary {

		&.first td:not(.level_spacer),
		td.first:not(.level_spacer),
		&.first th,
		th.first {
			border-top: 1px solid var(--border-trans-color);
		}

		&.last td:not(.level_spacer),
		td.last:not(.level_spacer),
		&.last,
		th.last {
			border-bottom: 1px solid var(--border-trans-color);
		}

		td,
		th {
			background: var(--screen-background-color);
		}
	}

	&.compte_resultat {
		thead {
			background: var(--screen-background-color);

			td,
			th {
				background: var(--screen-background-color);
			}
		}

		tbody tr:first-child {

			td,
			th {
				border-top: 1px solid var(--border-trans-color);
			}
		}

		input[type="text"] {
			width: 100%;
		}
	}

	&.spreadsheet_table {
		border-collapse: collapse;

		thead th {
			border-bottom: 1px solid var(--table-separator-line);
			vertical-align: bottom;
			font-size: .75rem;
			padding-right: 8px;
		}

		tbody th,
		tbody td {
			border: 1px solid var(--table-separator-line);
		}
	}

	button.mini.icon {
		padding: 0;
	}
}

body.caerp .panel-body {
	table {
		width: 100%;
	}
}

body.caerp .grand-total {
	table {
		border-collapse: collapse;

		tbody>tr:not(.row_recap):not(.row_catalogue):not(.add_row):nth-child(2n+1) {
			background: none;
		}

		th,
		td {
			font-size: 1rem;
			padding: var(--padding-xs) 0;
		}

		th[scope="row"] {
			font-weight: normal;
			padding-right: 4px;

			&::after {
				content: "\A0:";
			}

			+td {
				font-weight: bold;
				padding-left: 4px;
			}
		}

		.icon:not(.status) svg {
			height: 1rem;
			width: 1rem;
		}
	}
}

body.caerp .table_container {
	background: var(--screen-background-color);
	width: 100%;

	&:not(.scroll_hor) thead {
		background: var(--screen-background-color);
		position: sticky;
		top: 0;
		z-index: $stickyContentLayer;
	}

	table {
		width: 100%;
	}

	&.scroll_hor {
		max-width: 100%;
		overflow-y: auto;
	}

	+.actions {
		padding-top: var(--padding-s);
	}
	
	.fullscreen_toggle {
		position: sticky;
		top: 2px;
		z-index: $floatingLayer;
		svg:first-child {
			display: inline;
			+ svg {
				display: none;
			}
		}
		+ table {
			margin-top: var(--negative-padding-l);
		}
	}

	&.fullscreen {
		bottom: 0;
		left: 0;
		overflow-x: auto;
		overflow-y: auto;
		padding: var(--padding-s);
		position: absolute;
		right: 0;
		top: 0;
		z-index: $maskLayer;
		.fullscreen_toggle {
			left: 2px;
			z-index: $popinLayer;
			svg:first-child {
				display: none;
				+ svg {
					display: inline;
				}
			}
		}
		table {
			margin: 0 var(--padding-m) var(--padding-s) 0;
		}
		thead {
			background: var(--screen-background-color) !important;
			position: sticky;
			top: var(--negative-padding-s) !important;
			z-index: $aboveMaskLayer;
		}
		> a.btn.unstyled:first-child {
			svg:nth-child(1) {
				display: none;
			}
			svg:nth-child(2) {
				display: block;
			}
		}
	}
}

@media (min-width: $extrawideWidth ) {
	body.caerp table {

		td,
		th {
			padding-left: 8px;
			padding-right: 8px;
		}

		td.col_number {
			padding-left: var(--padding-3xl);
		}

		.col_date {
			width: 9em;
		}

		.col_datetime {
			width: 12em;
		}

		td.col_text.document_number {
			white-space: nowrap;
		}
	}
}

@media (min-width: $wideWidth ) {
	body.caerp table {
		.level_spacer {
			width: var(--padding-l);
		}

		td,
		th {
			padding-left: 4px;
			padding-right: 4px;
		}
	}
}

@media (min-width: $desktopWidth ) {
	body.caerp table {
		.level_spacer {
			width: var(--padding-m);
		}

		td.col_text.phone {
			white-space: nowrap;
			width: 11em;
		}

		td.col_text.unity {
			width: 3.5em;
		}
	}
}

@media (min-width: $tabletWidth ) {
	body.caerp table {
		tbody tr:last-child td.col_actions.row_ordering {
			li:only-child .btn.up {
				margin-right: calc( 1.5rem + 3px + .25rem );
			}
		}
	}

	body.caerp .main_toolbar:not(.nav_tools) ~ div .table_container {
		thead {
			top: 3.5em;
		}
	}

	body.caerp .main_toolbar:not(.nav_tools):empty ~ div .table_container,
	body.caerp .main_toolbar:not(.nav_tools) ~ div .modal_view .table_container,
	body.caerp .main_toolbar:not(.nav_tools) ~ div .collapsible .table_container {
		thead {
			top: 0;
		}
	}
}

@media (max-width: $tabletWidth ) {
	body.caerp table {
		td.col_number {
			padding-left: var(--padding-s);
		}

		td.col_actions {
			&.row_ordering {
				width: calc( 1.5rem + 6px + .5rem );
			}
		}

		td.col_avatar {
			min-height: 1.75rem;
			width: 1.75rem;

			.user_avatar {
				height: 1.5rem;
				width: 1.5rem;

				&.photo:hover {
					transform: scale(3);
				}
			}
		}

		.col_date,
		.col_datetime {
			min-width: 3.25em;
			width: 3.25em;
			overflow-wrap: anywhere;
		}

		.col_percentage_graphic {
			width: 7.5rem;
		}
	}

	body.caerp {
		.table_container {
			max-width: calc(100% - 20px);
			margin-right: 20px;
			overflow-x: auto;
			overflow-y: visible;
		}

		.layout[class*="_cols"] .table_container {
			padding: 0;
		}
	}
}

@media (max-width: $mobileWidth ) {
	body.caerp table {
		tr {
			min-height: 3rem;
			position: relative;
		}

		td.col_actions {
			position: static;

			.btn-group .dropdown-menu-right {
				right: calc( .25rem + 2px );
			}
		}

		.col_percentage_graphic {
			width: 6.25rem;
		}
	}

	body.caerp .table_container {
		max-width: 100%;
		overflow-x: auto;
		overflow-y: visible;
	}
}

@media print {

	// styles used when printing pages
	body.caerp table {
		border: 1px solid $print_fadedGrey;
		border-collapse: collapse;
		width: 100%;

		td,
		th {
			border: 1px solid $print_fadedGrey;
		}

		.col_actions {
			display: none;
		}

		.col_select {
			visibility: hidden;
		}
	}
}
